<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/extjs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>部门员工信息</title>

<!-- ext css includes -->
<link rel="stylesheet" type="text/css"
	href="${ctx}/ext/ux/treegrid/treegrid.css" rel="stylesheet" />

<!-- ext javascript includes -->
<script type="text/javascript"
	src="${ctx}/ext/ux/treegrid/TreeGridSorter.js"></script>
<script type="text/javascript"
	src="${ctx}/ext/ux/treegrid/TreeGridColumnResizer.js"></script>
<script type="text/javascript"
	src="${ctx}/ext/ux/treegrid/TreeGridNodeUI.js"></script>
<script type="text/javascript"
	src="${ctx}/ext/ux/treegrid/TreeGridLoader.js"></script>
<script type="text/javascript"
	src="${ctx}/ext/ux/treegrid/TreeGridColumns.js"></script>
<script type="text/javascript" src="${ctx}/ext/ux/treegrid/TreeGrid.js"></script>
<script type="text/javascript">
        	Ext.onReady(function(){
        		//--页面布局--%>
        		var westPanel = new Ext.tree.TreePanel({
        			useArrows: true,
        	        autoScroll: true,
        	        region:'west',
        	        width:200,
        	        animate: true,
        	        enableDD: true,
        	        containerScroll: true,
        	        listeners:{
        	        	click:function(node,e){
        	        		userStore.load({params:{deptId:node.id}});
        	        	}
        	        },
        	        border: false,
        	        rootVisible: false,
        	        loader: new Ext.tree.TreeLoader({url:'${ctx}/project/sign/org/ext/userdepartment!deptShow.action?deptId=${deptId}'}),
        	        root: {
        	            text: 'Ext JS',
        	            draggable: false,
        	            id: 'src',
        	            hidden: false
        	        }
        		});
        		
        		var MyRecord = Ext.data.Record.create([
        		            {name:'id',type:'string'},
        		            {name:'name',type:'string'},
        					{name:'dutyName',type:'string'},
        					{name:'officalPosition',type:'string'},
        					{name:'startDate',type:'string'},
        					{name:'endDate',type:'string'}
        		      ]);
        		
        		var userStore = new Ext.data.Store({
        			url:'${ctx}/project/sign/org/ext/userdepartment!userDetail.action',
        			baseParams:{
        			},
        			reader:new Ext.data.JsonReader({
        				totalProperty: 'totalCounts',
                     	root: 'results',
                     	id: 'id'
        			},MyRecord),
        			  sortInfo:{field:'id', direction:'ASC'}
        		});
        		
        		var colM = new Ext.grid.ColumnModel({
        			columns:[
        			     new Ext.grid.RowNumberer({header:'序号',width:35}),  
						{header: "姓名", width: 200, sortable: true, dataIndex: 'name'},
						{header: "职称", width: 120, sortable: true, dataIndex: 'dutyName'},
						{header: "职务", width: 120, sortable: true, dataIndex: 'officalPosition'},
						{header: "入职时间", width: 120, sortable: true, dataIndex: 'startDate'},
						{header: "离职时间", width: 120, sortable: true, dataIndex: 'endDate'}
        		     ]});
        		var centerPanel = new Ext.grid.GridPanel({
        			region:'center',
        		    store:userStore,
        	        sm:	new Ext.grid.RowSelectionModel({singleSelect:true}),
           			viewConfig:{forceFit:true},
        		    cm: colM
        		});
        		
        		var viewPanel = new Ext.Viewport({
        			layout:'border',
        			loadmask:true,
        			items:[
						westPanel,
						centerPanel
        			      ]
        		});
        	});
        	
</script>
</head>
<body>
</body>
</html>
